<template>
  <div :class="wrpCls">
    <span @click="toggleFullScreen" class="ant-pro-global-header-index-action"><a-icon :type="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" /></span>
    <!-- <notice-icon class="ant-pro-global-header-index-action"></notice-icon> -->
    <avatar-dropdown :class="prefixCls" />
  </div>
</template>

<script>
import screenfull from 'screenfull'
import AvatarDropdown from './AvatarDropdown'
import NoticeIcon from '@/components//NoticeIcon'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    screenfull,
    NoticeIcon
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      visible: false,
      isFullscreen: false
    }
  },
  methods: {
    // 全屏切换
    toggleFullScreen () {
      if (!screenfull.isEnabled) {
        this.$message.error('您的浏览器不支持全屏模式')
        return
      }
      screenfull.toggle()
      if (screenfull.isFullscreen) {
        this.isFullscreen = false
      } else {
        this.isFullscreen = true
      }
    },
    hide () {
      this.visible = false
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    }
  }
}
</script>
